<template lang="pug">
view.a-pop-up.fixed.full(:class="position=='center'?'flex center':position" v-if="show" @click="_close" @touchmove.stop.prevent)
  view.pop-up.bsbb.rel(@click.stop)
    view.close.mod.abs(@click.stop="_close" v-if="closeIcon"): aimg(:src="icon")
    slot
</template>
<script setup>
const props = defineProps({
  mask: {type: Boolean, default: true},// 遮罩
  closeIcon: {type: Boolean, default: false},// 关闭图标
  position: {type: String, default: 'center'}, // top,left,right,center,botoom
  show: {type: Boolean, default: true},  
})
const emits = defineEmits(['update:show'])
const _close = ()=>{
  emits('update:show', false)
}
const icon = ''
</script>
<style scoped lang="scss">
@import "@/common/scss/mixin.scss";
.a-pop-up{
  z-index: 100;
  .pop-up{
    @include bg(var(--pop-up-bgcolor, transparent));
    border-radius: var(--pop-up-border-radius, 0);
    text-align: left;
    margin: var(--pop-up-margin, 0);
    .close{
      right: var(--pop-up-close-right, 0);
      top: var(--pop-up-close-top, 0);
      --aimg-width: var(--pop-up-close-width, 24rpx);
    }
  }
  &.bottom{
    .pop-up{
      position: absolute;
      bottom: 0; left: 0;
      width: var(--pop-up-width, 100%);
    }
  }
  &.right{
    .pop-up{
      position: absolute;
      top: 0; right: 0; height: 100vh;
      width: var(--pop-up-width, 100%);
    }
  }
}
</style>
